<template>
    <el-row v-if="webSiteStore.find(keywords).length > 0">
        <template v-for="item in webSiteStore.find(keywords)" :key="item.screenshot">
            <el-col :span="22" :pull="1" :push="1" @click="handleItemClick(item)">
                <div class="col-item">
                    <el-image :src="item.screenshot" fit="cover" />
                    <h3>{{ item.title }}</h3>
                </div>
                <el-icon color="red" :size="30" @click.stop="webSiteStore.delete(item)">
                    <CircleCloseFilled />
                </el-icon>
            </el-col>
            <el-divider />
        </template>
    </el-row>
    <el-empty :image-size="200" description="暂无数据" v-else />
</template>
<script setup>
import useWebsites from './useWebsites';
import useHook from './useHook'
const { webSiteStore, keywords } = useWebsites();
const { handleItemClick } = useHook();
</script>
<style lang="less" scoped>
.el-col {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    cursor: pointer;

    &:hover {
        .el-icon {
            display: block;
        }
    }

    .col-item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-image {
            width: 100px;
            height: 100px;
            margin-right: 10px;
        }
    }

    .el-icon {
        display: none;
    }
}

.el-divider--horizontal {
    margin: 10px 0 0;
}
</style>